import React, { Component } from 'react'
import { bool,func,string } from 'prop-types'
// import './index.scss'

export default class Model extends Component {
    hideModel = ()=>{
       console.log("触发了取消")
       this.setState({
       		isShow:!this.state.isShow
       })
    }
    // 组织冒泡
    mainFn =(event)=>{
        event.stopPropagation()
    }
    OkModel = ()=>{
        console.log("触发了确认")
        // 点击确认
        		let name=this.refs.name.value;
        		let price=this.refs.price.value;
        		console.log(name,price)
        		this.setState({
        			name:name,
        			price:price
        		
        		})
        		// 判断输入框是否为空
        	if (name.value != '' && price.value != '') {
        		let obj = {
        			name: name.value,
        			price: price.value,
        			checked: false,
        			num: 1
        		}
        		// 将数据添加到数组中
        		this.arr.push(obj);
        		console.log(this.arr);
        		//关闭遮蔽层
        		this.setState({
        			isShow:!this.state.isShow
        		})
        	} else {
        		alert('请输入商品名称和价格');
        	}
    }
    toogle=()=> {
       this.setState({
       		isShow:!this.state.isShow
       })
    }
  render() {
    return (
        <div className="boxx" onClick={this.hideModel} style={{
            display:this.props.state.isShow?'block':'none'
        }}>
            <div className="main" style={{ height:this.props.height }} onClick={this.mainFn}>
                <h4>{this.props.title}</h4>
                <div>
                    {this.props.children}
                    <p>
                        <button onClick={this.hideModel} id="submit">取消</button>
                        <button id="submit" onClick={this.OkModel}>确认</button>
                    </p>
                </div>
                <span onClick={this.hideModel}>X</span>
                <div>
            </div>
            </div>
        </div>
    )
  }
}
// 组件传值props的type类型
Model.propTypes = {
    isShow:bool,
    close:func,
    ok:func,
    height:string
}
// 组件传值props的类型的默认值
Model.defaultProps = {
    isShow:false,
    close:function(){

    },
    ok:function(){

    },
    height:"200px"
}